<template>
  <div>
    <div class="magic-form">
      <img :src="magicsoft_mountain" alt />
      <div
        style="width:1300px;position:absolute;text-align:center;top:34%;left:50%;margin-left:-650px;"
      >
        <svg-icon icon-class="formBigData" :style="style"></svg-icon>
      </div>
      <div class="magic-form-main">
        <a-row type="flex" justify="space-between" :gutter="200">
          <a-col :span="12">
            <h3 class="formTitle">商务洽谈</h3>
          </a-col>
          <a-col :span="12">
            <h3 class="formTitle">渠道合作</h3>
          </a-col>
        </a-row>
        <a-row type="flex" justify="space-between" :gutter="200">
          <a-col :span="12" class="select-box-form-business">
            <business-form />
          </a-col>
          <a-col :span="12">
            <cooperation-form />
          </a-col>
        </a-row>
        <div class="magic-info">
          <div>
            <svg-icon icon-class="phone" class-name="contact-svg"></svg-icon>4008-050-721
          </div>
          <div>
            <svg-icon icon-class="handshake" class-name="contact-svg"></svg-icon>business@magicsoft.me
          </div>
          <div>
            <svg-icon icon-class="position" class-name="contact-svg"></svg-icon>杭州西湖区蒋村商务中心B2-409
          </div>
          <div>
            <svg-icon icon-class="employ" class-name="contact-svg"></svg-icon>windinghr@magicsoft.me
          </div>
        </div>
      </div>
      <div class="pageFooter">{{footerMsg}}</div>
    </div>
  </div>
</template>
<script>
import BusinessForm from "./BusinessForm";
import CooperationForm from "./CooperationForm";

export default {
  computed: {
    style() {
      let width = 565 * (document.body.offsetWidth / 1920);
      let height = 78 * (document.body.offsetWidth / 1920);
      return {
        width: width,
        height: height
      };
    }
  },
  components: {
    "cooperation-form": CooperationForm,
    "business-form": BusinessForm
  },
  data() {
    return {
      magicsoft_mountain: this.$global.IMG_URL + "/magicsoft_mountain.png?",
      footerMsg:
        "2019 © Copy Right 杭州风鼎科技有限公司 | 浙公网安备 33010602006278号 | 工信部备案号 浙ICP备15033929号-2"
    };
  }
};
</script>
<style lang="stylus" scoped>
.formTitle {
  font: 600 20px / 28px '微软雅黑';
  color: #F6F6FA;
  margin-bottom: 15px;
}

.magic-form {
  position: relative;

  img {
    width: 100%;
    max-width: 100%;
  }

  /deep/ .ant-form-item{
    margin-bottom:18px;
  }

  .select-box-form-business {
    position: relative;

    &::after {
      position: absolute;
      content: '';
      display: block;
      width: 1px;
      height: 226px;
      background: #999999;
      right: 0;
      top: 0;
    }
  }

  & /deep/ .ant-input {
    background: rgba(255, 255, 255, 0.6) !important;

    &::placeholder {
      color: #333;
    }
  }

  & /deep/ .ant-btn-primary {
    &[type='submit'] {
      width: 150px;
      background: #011555;
      height: 36px;
      color: #ffffff;
      font: 18px / 2 '微软雅黑';
      border-radius: 10px;
    }
  }

  .magic-form-main {
    width: 1300px;
    position: absolute;
    bottom: 90px;
    left: 50%;
    margin-left: -650px;
  }

  .pageFooter {
    width: 100%;
    position: absolute;
    background: rgba(0, 0, 0, 0.28);
    color: white;
    font: 300 12px / 60px '微软雅黑';
    left: 0;
    bottom: 0;
    text-align: center;
  }
}

.magic-info {
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.6);
  font: 20px / 1.5 '微软雅黑';
  justify-content: space-between;
  margin-top: 20px;

  .contact-svg {
    opacity: 0.6;
    margin-right: 10px;
  }
}
</style>

